.detail-h,.detail-h.fixed{position:relative;height:126px}
/*顶部下拉固定*/
.scroll-fixed{position:fixed;z-index:1111;top:0;left:0;width:100%;display:block;box-shadow:0px 0px 8px 0px rgba(0,0,0,0.04);border-bottom:0;height:80px;padding-top:10px;box-sizing:border-box;background:#fff;display: none;}
.scroll-fixed.active{display: block;}
.scroll-fixed .title{float:left;display:inline-block;padding-top:18px;font-size:18px;color:#000}
.scroll-fixed .title img{margin-right:10px;}
.scroll-fixed .title a{font-size:18px;}
.scroll-fixed .btn{float:right;margin-top:7px}
.scroll-fixed .btn a{display:inline-block;position:relative;width:148px;height:44px;border-radius:4px;margin-right:12px;font-size:18px;line-height:44px;color:#fff;text-align:center}
.scroll-fixed .btn a.view{background-color:#17A1FF}
.scroll-fixed .btn a.down{background-color:#3DB060}
.scroll-fixed .btn a.ffy{background-color:#ff9933}
.button:hover:before{background:rgba(255,255,255,0.2)}
.button:before{content:'';position:absolute;width:100%;top:0;left:0;height:100%;transition:background 0.4s}
.button i{margin-right:10px}
/*面包屑*/
.bread-nav{height:60px;line-height:60px;font-size:13px;color:#a6a6a6;}
.bread-nav span{font-family:"新宋体";margin:0 10px}
.bread-nav em,.bread-nav .tbr{color:#ff2a00;font-weight:400;}
.bread-nav h1 {
    float: right;
    color:#17A1FF;
    margin-right:20px
}
.bread-nav div{
    float: right;
    color: #17A1FF;
    margin-right: 20px;
    font-size: 28px;
    font-weight: 900;
}
.de-box .bread-nav {width: 100%;height:60px;line-height:60px;font-size:13px;color:#a6a6a6;}
.de-box .bread-nav h1 {   float: right;color:#17A1FF;margin-right: 0; }

/*内容左侧*/
.de-box{width:1330px;margin:0 auto;}
.de-box .left{float:left;width:950px;box-sizing:border-box;border-radius:4px;background:#fff;box-shadow:0px 0px 4px 2px rgba(0,0,0,0.01)}
.de-box .left .title{position:relative;color:rgba(0,0,0,0.85);border-bottom:1px solid #f5f5f5;width:100%;height:auto;overflow:hidden}
.de-box .left .title img{display:inline-block;float:left;padding:20px 0 20px 20px;}
.de-box .left .title h1{float:left;font-size:20px;padding:20px;line-height:26px;white-space:nowrap;}
.de-box .left .title h1 a{font-size:20px;}
.de-box .left .title em{position:absolute;top:15px;right:21px;display:inline-block;width:100px;height:36px;border:1px solid #e5e5e5;border-radius:40px;background:#fafafa;color:#a1a1a1;text-align:center;font-size:13px;line-height:36px;cursor:pointer}
.de-box .left .title em i{margin-right:5px}
.left .detail{width:100%;position:relative;padding:25px;line-height:25px;color:rgba(0,0,0,.85);font-size:14px;height:auto;overflow:hidden}
.left .detail img{max-width:100%;display:block;margin:0 auto;margin-bottom:20px}
.left .detail img:hover{cursor:url(../images/showScale.ico),auto}
.left .detail .desc{padding:0 10px}
.left .detail .tags{margin-top:30px;border-top:1px solid #f5f5f5}
.left .detail .tags h3{height:36px;font-size:16px;margin:25px 0 0 0}
.left .detail .tags a,.tj-text a{float:left;display:block;overflow:hidden;margin-right:10px;margin-bottom:9px;padding:0 10px;height:30px;border-radius:4px;background:#f3f4f9;color:#999;text-align:center;font-size:14px;line-height:30px}
.left .detail .tags a:hover,.tj-text a:hover{background:#17A1FF;color:#fff;text-decoration:none;}
.tj-text{padding:10px 0 20px 0;}
/*内容右侧*/
.de-box .right{float:left;width:360px;margin-left:20px}
.right .view-down{padding:24px 24px 10px 24px;background-color:#fff;border-radius:4px;box-shadow:0px 0px 4px 2px rgba(0,0,0,0.01);margin-bottom:20px}
.view-down a{display:block;position:relative;width:100%;height:44px;border-radius:4px;margin-right:12px;font-size:18px;line-height:44px;font-weight:normal;color:#fff;letter-spacing:1.5px;text-align:center}
.view-down .view{background-color:#17A1FF;margin-bottom:18px}
.view-down .down{background-color:#3DB060;margin-bottom:18px}
.view-down .data,.intall .data{color:#838383;text-align:center;font-size:15px;height:50px;}
.view-down .data span,.intall .data span{display:inline-block;width:33.33%;float:left;line-height:50px;}
.view-down .data span i,.intall .data span i{margin-right:10px}
.right .info{padding:24px 34px;background-color:#fff;border-radius:4px;box-shadow:0px 0px 4px 2px rgba(0,0,0,0.01);margin-bottom:20px}
.right .info ul li{display:inline-block;width:100%;height:33px;color:#838383;font-size:13px;line-height:33px}
.right .info ul li span.l{float:left;display:inline-block;margin-right:10px;color:#000;}
.right .info ul li span.r{float:right;display:inline-block;color:#838383}
.right .info ul li span.r a{overflow:hidden;text-overflow: ellipsis;white-space:nowrap;max-width:120px;display:block;}
.right .info ul li.copyright{margin-top:13px;height:41px;border-top:1px solid #eceff1;line-height:51px}
.right .info ul li.copyright em{position:relative;display:inline-block;width:16px;height:16px;border-radius:40px;background:#c4c4c4;color:#fff;vertical-align:0;line-height:16px;text-align:center}
.right .info ul li .sm{position:absolute;top:-228px;left:-395px;display:none;padding:17px 19px 25px 28px;width:395px;height:auto;border:1px solid #dfdfdf;background:#fff;color:#af9178;cursor:pointer}
.right .info ul li .sm .title{height:50px;font-size:18px;line-height:50px}
.right .info ul li .sm    p{text-align:left;text-indent:26px;font-size:13px;line-height:20px}
.right .info ul li.copyright em:hover .sm{display:block}
.right .like-work{margin-bottom:20px;padding:20px 20px 10px 20px;background-color:#fff;border-radius:4px;box-shadow:0px 0px 4px 2px rgba(0,0,0,0.01);height:auto;overflow:hidden}
.right .like-work .title{width:100%;height:30px;color:#333;text-align:left;font-size:16px;line-height:30px;margin-bottom:10px;padding:0 5px}
.right .like-work .title a{float:right;color:#aaa;text-align:right;font-size:14px;cursor:pointer;font-weight:normal}
.right .like-work ul li{width:33.33%;float:left;padding:10px 5px 10px 5px;}
.right .like-work ul li .pic{display: block;height:80px;overflow:hidden;border:solid 1px #efefef;}
.right .like-work ul li img{width:100%;height:auto;position: relative;top: 50%;transform: translateY(-50%);}
.right .like-work ul li p{font-size:12px;line-height:24px;height:60px;overflow:hidden;padding:5px 0 0 0;}
.right .like-work ul li p a{color:#999;}
.right .like-work ul li p a:hover{color:#17A1FF;text-decoration:none;}
.right .like-work ul li h2{font-size:12px;line-height:24px;height:60px;overflow:hidden;padding:5px 0 0 0;font-weight: normal;}
.right .like-work ul li h2 a{color:#999;word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;}
.right .like-work ul li h2 a:hover{color:#17A1FF;text-decoration:none;}
/*图片点击放大预览*/
/*图片点击放大预览*/
.img-preview{position: fixed;background-color: rgba(0, 0, 0, 0.4);width: 100%;height: 100%;top: 0;left: 0;z-index: 2222;display: none;overflow-y: auto;}
.img-preview .box{vertical-align: middle;padding: 50px 0;box-sizing: border-box;width: 100%;text-align: center;height: 100%;display: table;}
.img-preview .mask{position: fixed;z-index: 2223;top: 0;left: 0;width: 100%;height: 100%;}
.img-preview .cont{display: table-cell;vertical-align: middle;padding: 50px 0;box-sizing: border-box;}
.img-preview .cont .img{max-width: 80%;padding: 12px;box-sizing: border-box;border-radius: 5px;background-color: #fff;display: inline-block;width: auto;position: relative;z-index: 3333;}
.img-preview .cont .close{cursor:pointer;width:36px;height:36px;border-radius:50px;text-align:center;line-height:32px;font-size:22px;background:rgba(0,0,0,0.45);color:#fff;position:absolute;top:28px;right:28px}  
/*详细页面列表*/
.detail-pins{margin:40px 0 0 0;}
.detail-pins h2{font-size:24px;color:#363636;text-align:center;font-weight:normal;height:36px;}
@media screen and (max-width: 1440px){
.de-box {width:1280px;}
.de-box .left{width:900px;}
}
@media screen and (max-width: 1330px){
.de-box {width:1200px;}
.de-box .left{width: 820px;}
}
/* 使用声明 */
.use-tip{margin:50px 0 0 0;}
.use-tip h3{font-size:14px;color:#5e5e5e;height:36px;}
.use-tip p{line-height:28px;font-size:12px;color:#999;}

/* 超过30金币素材详情页布局 */
.gold-intall{margin-bottom:20px;}
.gold-intall .gold{height:67px;line-height:66px;overflow: hidden;background: url(../images/jinbi-bg.png) no-repeat;padding:0 20px;font-size:14px;border-radius:4px;border-bottom-left-radius:0;border-bottom-right-radius:0;}
.gold-intall .gold span{display:inline-block;float:left}
.gold-intall .gold span.r{color:#ff6600;font-size:32px;font-weight:bold;padding:0 0 0 10px;}

.intall{padding:20px 20px 15px 20px;background-color:#fff;border-radius:4px;box-shadow:0px 0px 4px 2px rgba(0,0,0,0.01);border-top-left-radius:0;border-top-right-radius:0;}
.intall p{height: 33px;line-height: 33px;width: 100%;}
.intall p span{color: #838383;}
.intall p span.c-b{color: #17A1FF;}
.intall p span.c-r{color: #ff0000;}
.intall p span em{display: inline-block;width: 16px;height: 16px;border-radius: 50%;border: 1px solid #838383;text-align: center;line-height: 14px;font-size: 12px;margin-left: 5px;position: relative;cursor: pointer;}
.intall p span em i{display: none;position: absolute;width: 220px;border-radius: 10px;background: #54B554;color: #fff;font-size: 12px;padding: 10px 15px;left:50%;margin-left: -115px;top: -65px;font-style: normal;line-height: 16px;}
.intall p span em i:after{content: "";width: 0;height: 0;border-width:10px ;border-style: solid;border-color: #54B554 transparent transparent transparent;position: absolute;left: 50%;margin-left: -5px;top: 48px;}
.intall p span em:hover i{display: block;}
.intall a{display: inline-block;}
.intall a.down {float: left;display:block;margin-top: 10px;position:relative;width:175px;height:44px;border-radius:4px;margin-right:30px;font-size:18px;line-height:44px;font-weight:normal;color:#fff;letter-spacing:1.5px;text-align:center;background-color: #ff9933;}
.intall a.qq{width: 100px;height: 26px;line-height: 26px;text-indent: 5px;border: 1px #00b7d6 solid;color: #00b7d6;margin-top: 25px;border-radius: 2px;display: inline-block;}
.intall a.qq i{margin-right: 5px;}
.intall a.qq:hover{border: 1px #1f9bd9 solid;color: #1f9bd9;}
.intall .data{padding:15px 0 0 0;}

.saled{background-color:#fff;margin-bottom:20px;border-radius:4px;}
.saled ul{width: 100%;height: auto;overflow: hidden;}
.saled ul li{display: inline-block;float: left;width: 33.3333333%;height: 45px;line-height: 45px;border-top: 2px solid #fff;text-align: center;cursor: pointer;color: #838383;font-size: 14px;}
.saled ul li.active{border-top: 2px solid #17A1FF;color: #17A1FF;}
.saled .cont{display: none;width: 100%;padding: 0 20px 10px 20px;line-height: 30px;color: #838383;}
.saled .cont.active{display: block;}

/* 详情页编辑器内容 */
.syntaxhighlighter a,.syntaxhighlighter code,.syntaxhighlighter div,.syntaxhighlighter table,.syntaxhighlighter table caption,.syntaxhighlighter table tbody,.syntaxhighlighter table td,.syntaxhighlighter table thead,.syntaxhighlighter table tr,.syntaxhighlighter textarea{-moz-border-radius:0!important;-webkit-border-radius:0!important;background:0 0!important;border:0!important;bottom:auto!important;float:none!important;height:auto!important;left:auto!important;line-height:1.3em!important;margin:0!important;outline:0!important;overflow:visible!important;padding:0!important;position:static!important;right:auto!important;text-align:left!important;top:auto!important;vertical-align:baseline!important;width:auto!important;box-sizing:content-box!important;font-family:Consolas,"Bitstream Vera Sans Mono","Courier New",Courier,monospace!important;font-weight:400!important;font-style:normal!important;min-height:inherit!important;min-height:auto!important}
.syntaxhighlighter{margin:1em 0 1em 0!important;position:relative!important;overflow:auto!important;font-size:1em!important}
.syntaxhighlighter.source{overflow:hidden!important}
.syntaxhighlighter .bold{font-weight:700!important}
.syntaxhighlighter .italic{font-style:italic!important}
.syntaxhighlighter .line{white-space:pre!important}
.syntaxhighlighter table{width:100%!important}
.syntaxhighlighter table caption{text-align:left!important;padding:.5em 0 .5em 1em!important}
.syntaxhighlighter table td.code{width:100%!important}
.syntaxhighlighter table td.code .container{position:relative!important}
.syntaxhighlighter table td.code .container textarea{box-sizing:border-box!important;position:absolute!important;left:0!important;top:0!important;width:100%!important;height:100%!important;border:none!important;background:#fff!important;padding-left:1em!important;overflow:hidden!important;white-space:pre!important}
.syntaxhighlighter table td.gutter .line{text-align:right!important;padding:0 .5em 0 0!important}
.syntaxhighlighter table td.code .line{padding:0 1em!important}
.syntaxhighlighter.nogutter td.code .container textarea,.syntaxhighlighter.nogutter td.code .line{padding-left:0!important}
.syntaxhighlighter.show{display:block!important}
.syntaxhighlighter.collapsed table{display:none!important}
.syntaxhighlighter.collapsed .toolbar{padding:.1em .8em 0 .8em!important;font-size:1em!important;position:static!important;width:auto!important;height:auto!important}
.syntaxhighlighter.collapsed .toolbar span{display:inline!important;margin-right:1em!important}
.syntaxhighlighter.collapsed .toolbar span a{padding:0!important;display:none!important}
.syntaxhighlighter.collapsed .toolbar span a.expandSource{display:inline!important}
.syntaxhighlighter .toolbar{position:absolute!important;right:1px!important;top:1px!important;width:11px!important;height:11px!important;font-size:10px!important;z-index:10!important}
.syntaxhighlighter .toolbar span.title{display:inline!important}
.syntaxhighlighter .toolbar a{display:block!important;text-align:center!important;text-decoration:none!important;padding-top:1px!important}
.syntaxhighlighter .toolbar a.expandSource{display:none!important}
.syntaxhighlighter.ie{font-size:.9em!important;padding:1px 0 1px 0!important}
.syntaxhighlighter.ie .toolbar{line-height:8px!important}
.syntaxhighlighter.ie .toolbar a{padding-top:0!important}
.syntaxhighlighter.printing .line.alt1 .content,.syntaxhighlighter.printing .line.alt2 .content,.syntaxhighlighter.printing .line.highlighted .number,.syntaxhighlighter.printing .line.highlighted.alt1 .content,.syntaxhighlighter.printing .line.highlighted.alt2 .content{background:0 0!important}
.syntaxhighlighter.printing .line .number{color:#bbb!important}
.syntaxhighlighter.printing .line .content{color:#000!important}
.syntaxhighlighter.printing .toolbar{display:none!important}
.syntaxhighlighter.printing a{text-decoration:none!important}
.syntaxhighlighter.printing .plain,.syntaxhighlighter.printing .plain a{color:#000!important}
.syntaxhighlighter.printing .comments,.syntaxhighlighter.printing .comments a{color:#008200!important}
.syntaxhighlighter.printing .string,.syntaxhighlighter.printing .string a{color:#00f!important}
.syntaxhighlighter.printing .keyword{color:#069!important;font-weight:700!important}
.syntaxhighlighter.printing .preprocessor{color:gray!important}
.syntaxhighlighter.printing .variable{color:#a70!important}
.syntaxhighlighter.printing .value{color:#090!important}
.syntaxhighlighter.printing .functions{color:#ff1493!important}
.syntaxhighlighter.printing .constants{color:#06c!important}
.syntaxhighlighter.printing .script{font-weight:700!important}
.syntaxhighlighter.printing .color1,.syntaxhighlighter.printing .color1 a{color:gray!important}
.syntaxhighlighter.printing .color2,.syntaxhighlighter.printing .color2 a{color:#ff1493!important}
.syntaxhighlighter.printing .color3,.syntaxhighlighter.printing .color3 a{color:red!important}
.syntaxhighlighter.printing .break,.syntaxhighlighter.printing .break a{color:#000!important}
.syntaxhighlighter{background-color:#fbfbfb!important;border:1px solid #ededed;padding:10px}
.syntaxhighlighter .line.highlighted.alt1,.syntaxhighlighter .line.highlighted.alt2{background-color:#c3defe!important}
.syntaxhighlighter .line.highlighted.number{color:#fff!important}
.syntaxhighlighter table caption{color:#000!important}
.syntaxhighlighter .gutter{color:#ccc!important}
.syntaxhighlighter .gutter .line{border-right:1px solid #e2e2e2!important}
.syntaxhighlighter .gutter .line.highlighted{background-color:#d4d0c8!important;color:#fff!important}
.syntaxhighlighter.printing .line .content{border:none!important}
.syntaxhighlighter.collapsed{overflow:visible!important}
.syntaxhighlighter.collapsed .toolbar{color:#3f5fbf!important;background:#fff!important;border:1px solid #d4d0c8!important}
.syntaxhighlighter.collapsed .toolbar a{color:#3f5fbf!important}
.syntaxhighlighter.collapsed .toolbar a:hover{color:#a70!important}
.syntaxhighlighter .toolbar{color:#a0a0a0!important;background:#d4d0c8!important;border:none!important;display:none}
.syntaxhighlighter .toolbar a{color:#a0a0a0!important}
.syntaxhighlighter .toolbar a:hover{color:red!important}
.syntaxhighlighter .plain,.syntaxhighlighter .plain a{color:#353f5d!important}
.syntaxhighlighter .comments,.syntaxhighlighter .comments a{color:#929292!important}
.syntaxhighlighter .string,.syntaxhighlighter .string a{color:#19ab00!important}
.syntaxhighlighter .keyword{color:#0086b3!important}
.syntaxhighlighter .preprocessor{color:#646464!important}
.syntaxhighlighter .variable{color:#a70!important}
.syntaxhighlighter .value{color:#090!important}
.syntaxhighlighter .functions{color:#ff1493!important}
.syntaxhighlighter .constants{color:#06c!important}
.syntaxhighlighter .script{font-weight:700!important;color:#7f0055!important;background-color:none!important}
.syntaxhighlighter .color1,.syntaxhighlighter .color1 a{color:gray!important}
.syntaxhighlighter .color2,.syntaxhighlighter .color2 a{color:#ff1493!important}
.syntaxhighlighter .color3,.syntaxhighlighter .color3 a{color:red!important}
.syntaxhighlighter .xml .keyword{color:#3f7f7f!important;font-weight:400!important}
.syntaxhighlighter .xml .color1,.syntaxhighlighter .xml .color1 a{color:#7f007f!important}
.syntaxhighlighter .xml .string{font-style:italic!important;color:#2a00ff!important}
.syntaxhighlighter .line.alt2:hover{background-color:#c0f2ff}
.syntaxhighlighter::-webkit-scrollbar{width:4px;height:4px}
.syntaxhighlighter::-webkit-scrollbar-track-piece{background-color:#ededed;margin:-2px}
.syntaxhighlighter::-webkit-scrollbar-thumb{background:#444;min-height:150px;min-width:150px;border-radius:10px}
.syntaxhighlighter::-webkit-scrollbar-thumb:vertical:hover{background:#000}
.syntaxhighlighter::-webkit-scrollbar-thumb:horizontal:hover{background:#000}
.main-detail{padding:0 30px}
.main-detail p{padding:0 0 0 20px;margin:15px 0 0 0}
.main-detail h3{border-bottom:1px solid #eff3f5;line-height:42px;font-size:22px;font-weight:400;padding:20px 0 10px 0}
.main-detail h4{line-height:26px;font-size:16px;font-weight:400;padding:30px 0 0 22px}